<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

import { useStudentTable } from './composables/useStudentTable'

import StudentImporter from './StudentImporter.vue'

import enUS from './locales/en-US.json'
import zhCN from './locales/zh-CN.json'
import type { TableSlotCell } from '@/types/components-tool'
import type { UserProfile } from '@/apis/user'
import { defineMessage } from '@/locales'
import { tableProps } from '@/constants/component-props'

useI18n<[typeof import('./locales/zh-CN.json')], Locales>({
  useScope: 'local',
  messages: defineMessage(enUS, zhCN)
})

const { columns, students } = useStudentTable()
</script>

<template>
  <div class="bg-arco-2 pb-xs mb-xs rounded">
    <header class="flex justify-between pa-xs">
      <h3 class="card-title">
        <i class="i-fluent-text-column-one-wide-lightning-24-filled text-lg" />学生名单
      </h3>
      <StudentImporter />
    </header>
    <a-table v-bind="tableProps" row-key="username" :data="students" :columns>
      <template #th><th class="arco-table-thead" /></template>
      <template #role="{ record: { role } }: TableSlotCell<UserProfile>">
        <RoleTag size="small" :role />
      </template>
      <template #action>
        <a-button-group size="mini" type="secondary">
          <a-button checkable class="px-2!" status="success">
            <i class="i-fluent-edit-person-24-filled" />
          </a-button>
          <a-button class="px-2!" status="success">
            <i class="i-fluent-contact-card-group-28-filled" />
          </a-button>
          <a-button class="px-2!" status="danger">
            <i class="i-fluent-delete-12-regular" />
          </a-button>
        </a-button-group>
      </template>
    </a-table>
  </div>
</template>
